<template>
  <div class="personal-center">
    <div class="info-header">
      <el-image
        src="https://theblogimage.oss-cn-fuzhou.aliyuncs.com/imagefortypora/designer-banner.jpg"
        fit="cover"
        style="height:330px;"
      />
      <PanThumb :image="avatar" class="panThumb" />
      <div class="info-name"><span>admin</span></div>
    </div>
    <div class="info-body">
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="个人信息" name="first">
          <div class="subtitle"><span>▎</span>账户信息</div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户名">admin</el-descriptions-item>
            <el-descriptions-item label="账户密码">123456</el-descriptions-item>
            <el-descriptions-item label="IP地址">{{ pos || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="个性tag">
              <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="inputVisible"
                ref="saveTagInput"
                v-model="inputValue"
                class="input-new-tag"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              />
              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="合约账本">EA156A2C16EB8F24FE98EC6A36B3CB23229DFDB192C100F49828704FED25E43E</el-descriptions-item>
          </el-descriptions>
          <el-divider />
          <div class="subtitle"><span>▎</span>个性签名</div>
          <el-input
            v-model="textarea"
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
          />
          <el-divider />
          <div class="subtitle"><span>▎</span>病人信息</div>
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          />
        </el-tab-pane>
        <el-tab-pane label="配置信息" name="second">
          <div class="subtitle"><span>▎</span>头像更换</div>
          <!-- 头像更换功能 -->
          <div class="cropper-app">
            <el-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width="100px" class="demo-ruleForm">
              <el-form-item label="头像上传" prop="mainImage">
                <div class="list-img-box">
                  <div v-if="formValidate.mainImage !== ''">
                    <img :src="formValidate.mainImage" style="width:300px;height:150px" alt="自定义头像">
                  </div>
                  <div v-else class="upload-btn" style="height: 120px;" @click="uploadPicture('flagImg')">
                    <i class="el-icon-plus" style="font-size: 30px;" />
                    <span>头像设置</span>
                  </div>
                </div>
                <input v-model="formValidate.mainImage" type="hidden" placeholder="请添加头像">
              </el-form-item>
            </el-form>
            <!-- 剪裁组件弹窗 -->
            <el-dialog
              title="裁切头像"
              :visible.sync="cropperModel"
              width="950px"
              center
            >
              <cropper-image
                ref="child"
                :name="cropperName"
                @uploadImgSuccess="handleUploadSuccess"
              />
            </el-dialog>
            <!--查看大封面-->
            <el-dialog
              title="查看大封面"
              :visible.sync="imgVisible"
              center
            >
              <img v-if="imgVisible" :src="imgName" style="width: 100%" alt="查看">
            </el-dialog>
          </div>

        </el-tab-pane>
        <el-tab-pane label="统计分析" name="third">
          <el-empty />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import { mapGetters } from 'vuex'
// import { uploadFile } from '@/api/file.js'
// 引入剪裁图片组件
import CropperImage from './components/CropperImage'

export default {
  name: 'PersonalCenter',
  components: {
    PanThumb,
    CropperImage
  },
  data() {
    return {
      activeName: 'second',
      // 个性 tag 设置
      dynamicTags: ['看电影', '阅读文献', '编程'],
      inputVisible: false,
      inputValue: '',
      // 病人节点信息
      data: [{
        id: 1,
        label: '基因病',
        children: [{
          id: 5,
          label: '白化病',
          children: [{
            id: 9,
            label: '张三'
          }, {
            id: 10,
            label: '李四'
          }]
        }]
      }, {
        id: 2,
        label: '遗传病',
        children: [{
          id: 6,
          label: '王五'
        }, {
          id: 7,
          label: '小红'
        }]
      }, {
        id: 3,
        label: '食源性疾病',
        children: [{
          id: 8,
          label: '小明'
        }, {
          id: 9,
          label: '小君'
        }]
      },
      {
        id: 4,
        label: '性病',
        children: [{
          id: 10,
          label: '梅毒',
          children: [{
            id: 9,
            label: '红叶'
          }, {
            id: 13,
            label: '花柳'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      textarea: '关注医保，人人有责',
      // 重头戏：实现头像更改
      formValidate: {
        mainImage: ''
      },
      ruleValidate: {
        mainImage: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ]
      },
      // 裁切图片参数
      cropperModel: false,
      cropperName: '',
      imgName: '',
      imgVisible: false
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'lng',
      'lat',
      'city',
      'province'
    ]),
    pos() {
      return this.province.slice(0, -1) + this.city
    }
  },
  created() {
    if (localStorage.getItem('tags') === null) {
      localStorage.setItem('tags', JSON.stringify(['看电影', '阅读文献', '编程']))
    }
    this.dynamicTags = JSON.parse(localStorage.getItem('tags'))
  },
  beforeDestroy() {
    localStorage.setItem('tags', JSON.stringify(this.dynamicTags))
  },
  methods: {
    // tab 切换
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 处理 tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      localStorage.setItem('tags', JSON.stringify(this.dynamicTags))
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
        localStorage.setItem('tags', JSON.stringify(this.dynamicTags))
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    // 封面设置
    uploadPicture(name) {
      this.cropperName = name
      this.cropperModel = true
    },
    // 图片上传成功后
    handleUploadSuccess(data) {
      // console.log(data)
      // switch (data.name) {
      //   case 'flagImg':
      //     this.formValidate.mainImage = 'http://ydfblog.cn/dfs/' + data.url
      //     console.log('最终输出' + data.name)
      //     break
      // }
      this.$store.dispatch('user/changeAvatar', data.url)
      this.cropperModel = false
    }
  }
}
</script>
<style lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style lang="scss" scoped>
.personal-center {
  height: 1300px;
  padding: 10px 10px 0;
  .info-header {
      position: relative;
      height: 380px;
      // border: 1px solid red;
      .panThumb {
      z-index: 100;
      height: 100px!important;
      width: 100px!important;
      position: absolute!important;
      top: 277px;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid #fff;
      background-color: #fff;
      margin: auto;
      box-shadow: none!important;
      ::v-deep .pan-info {
        box-shadow: none!important;
      }
    }
    .info-name {
      position: absolute;
      width: 100px;
      height: 30px;
      top: 380px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      line-height: 30px;
      font-size: 32px;
      font-weight: 500;
    }

  }
  .info-body {
    width: 100%;
    margin-top: 40px;
    .subtitle {
      font-weight:600;
      margin-bottom:20px;
      span {
        color: #43b244;
      }
    }
  }
}

// 更换图片样式
 .upload-list-cover{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 40px;
      align-items: center;
      background: rgba(0,0,0,.6);
      opacity: 0;
      transition: opacity 1s;
  }
  .cover_icon {
    font-size: 30px;
  }
  .upload-btn{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #cccccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 1px #cccccc;
  }
  .upload-btn:hover {
    border: 1px solid #69b7ed;
  }
  .upload-btn i{
    margin: 5px;
  }
</style>
